<template>
  <div class="qr-container">
    <!-- 微信登录二维码（直接调用后端接口） -->
    <img
        :src="url"
        alt="微信登录二维码"
        class="qr-img"
        @error="handleQrError"
    >
    <!-- 刷新按钮 -->
    <button @click="refreshQrCode">刷新二维码</button>
  </div>
</template>

<script setup>
import {wxLogin} from "@/apis/loginApi.js";
import {ref} from "vue";
const url = ref("");
// 刷新二维码（添加随机参数避免缓存）
const refreshQrCode =async () => {
  const res=await wxLogin();
  console.log(res.data);
  url.value=res.data;
};

// 二维码加载失败处理
const handleQrError = () => {
  alert('二维码加载失败，请重试');
};
</script>

<style>
.qr-container {
  text-align: center;
  margin: 20px 0;
}
.qr-img {
  width: 200px;
  height: 200px;
}
button {
  margin-top: 10px;
  padding: 5px 15px;
  color: #07c160;
  border: 1px solid #07c160;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
</style>